<template>
  <div class="reg-login-container">
    <div class="login-body">
      <div class="login-header">
        <div class="header-top">
          <div class="top-text">
            ABOUT DUAL BY FIT ISLAND·MAKE A BOOKING·MANAGE WAITINGS
          </div>
          <a @click="toIndex">Go Index</a>
        </div>
        <div class="header-bottom">
          <a id="mainlogo1" href="#"
            ><img src="../static/slider/LOGO.png" />
          </a>
          <div class="btm-text">MEMBER INFO</div>
        </div>
      </div>
      <div class="login-content">
        <div class="user-header">
          <div class="user-avatar">
            <img src="../static/slider/avatar.png" alt="" />
          </div>
          <div class="user-name">
            <span v-if="!changeInfo.nickName">{{ userInfo.nickName }}</span>
            <input
              type="text"
              v-model="userInfo.nickName"
              v-if="changeInfo.nickName"
              @blur="updateUserInfo('nickName')"
            />
            <span @click="OpenInput('nickName')">
              <img
                src="../static/slider/pen.png"
                v-if="!changeInfo.nickName"
                alt=""
              />
              <img
                src="../static/slider/cancel11.png"
                v-if="changeInfo.nickName"
                alt=""
              />
            </span>
          </div>
          <div class="user-id">User ID：{{ userInfo.id }}</div>
        </div>
        <div class="user-info">
          <div class="info-item">
            <div class="item-info">
              <div class="info-title">Gender:</div>
              <div class="item-data">
                {{ userInfo.sex == 0 ? "Males" : "Female" }}
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="item-info">
              <div class="info-title">Height:</div>
              <div class="item-data">{{ userInfo.height || "-" }} cm</div>
            </div>
          </div>
          <div class="info-item">
            <div class="item-info">
              <div class="info-title">Weight:</div>
              <div class="item-data" v-if="!changeInfo.weight">
                {{ userInfo.weight || "-" }} kg
              </div>
              <input
                type="text"
                v-model="userInfo.weight"
                v-if="changeInfo.weight"
                @blur="updateUserInfo('weight')"
              />
            </div>
            <div class="change-btn" @click="OpenInput('weight')">
              {{ !changeInfo.weight ? "Change" : "Cancel" }}
            </div>
          </div>
          <div class="info-item">
            <div class="item-info">
              <div class="info-title">Age:</div>
              <div class="item-data" v-if="!changeInfo.age">
                {{ userInfo.age || "-" }} years old
              </div>
              <input
                type="text"
                v-model="userInfo.age"
                v-if="changeInfo.age"
                @blur="updateUserInfo('age')"
              />
            </div>
            <div class="change-btn" @click="OpenInput('age')">
              {{ !changeInfo.age ? "Change" : "Cancel" }}
            </div>
          </div>
          <div class="info-item">
            <div class="item-info">
              <div class="info-title">Mobile:</div>
              <div class="item-data" v-if="!changeInfo.phone">
                {{ userInfo.phone || "-" }}
              </div>
              <input
                type="text"
                v-model="userInfo.phone"
                v-if="changeInfo.phone"
                @blur="updateUserInfo('phone')"
              />
            </div>
            <div class="change-btn" @click="OpenInput('phone')">
              {{ !changeInfo.phone ? "Change" : "Cancel" }}
            </div>
          </div>
          <div class="info-item">
            <div class="item-info">
              <div class="info-title">E-mail:</div>
              <div class="item-data" v-if="!changeInfo.userMail">
                {{ userInfo.userMail }}
              </div>
              <input
                type="text"
                v-model="userInfo.userMail"
                v-if="changeInfo.userMail"
                @blur="updateUserInfo('phone')"
              />
            </div>
            <div class="change-btn" @click="OpenInput('userMail')">
              {{ !changeInfo.userMail ? "Change" : "Cancel" }}
            </div>
          </div>
        </div>
        <div class="log-out">
          <button @click="logout">Log Out</button>
        </div>
      </div>
      <div class="login-footer">
        <div class="foot-body">
          <a id="subLogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <span class="foot-web"> 2024 @ DUAL BY FIT ISLAND</span>
          <span class="foot-link">
            : www.dual by fit island.sg .: contact . terms & condition . fag :
            private dinner</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { Message } from "element-ui";

export default {
  name: "PersonCenter",
  data() {
    return {
      userInfo: {},
      changeInfo: {
        nickName: false,
        weight: false,
        age: false,
        phone: false,
        userMail: false,
      },
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    updateUserInfo(key) {
      let that = this
      that.changeInfo[key] = false;
      that.$login
        .updateUserInfo(that.userInfo)
        .then((res) => {
          if (res && res.code === "00000") {
            Message({
              message: `Update Your ${key} successfully!`,
              type: "success",
              duration: 2 * 1000,
            });
            this.userInfo = {}
            that.queryUserInfo();
          }
        })
    },
    queryUserInfo() {
      let that = this
      that.$login.getUserInfo().then((res) => {
        if (res && res.code === "00000") {
          that.userInfo = res.data;
          console.log(that.userInfo,'userInfo');
          that.$user.setUserInfo(JSON.stringify(that.userInfo));
        }
      });
    },
    OpenInput(key) {
      this.changeInfo[key] = !this.changeInfo[key];
    },
    toIndex() {
      this.$router.push({
        name: "Index",
      });
    },
    getUserInfo() {
      this.userInfo = JSON.parse(this.$user.getUserInfo());
    },
    logout() {
      this.$user.removeToken();
      this.$user.removeUser();
      Message({
        message: "Log Out successfully!",
        type: "success",
        duration: 2 * 1000,
      });
      setTimeout(() => {
        this.$router.push({
          name: "Index",
        });
      }, 1000);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
input {
  width: 8vw;
  height: 2vh;
  margin-right: 0.5vw;
  border: none;
  border-bottom: 1px solid #646464;
  outline: none;
  font-size: 0.8vw;
}
.reg-login-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: rgb(244, 222, 185);
  display: flex;
  justify-content: center;
}

.login-body {
  width: 55vw;
  border-right: 0.5px solid #2e0c00;
  border-left: 0.5px solid #2e0c00;
  max-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  flex: 2;
  background-color: #2e0c00;
  padding: 3vh 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header-top {
  display: flex;
  justify-content: space-between;
  color: #b08e4b;
}

.header-top a {
  font-size: 0.9vw;
  cursor: pointer;
}
.top-text {
  font-size: 0.83vw;
}

.login-header a {
  text-decoration: none;
  color: #b08e4b;
}
.header-top > a {
  color: #f3deb9;
}
.login-content {
  border-top: 4px solid #b08e4b;
  flex: 15;
  padding: 2vh 3vw 0 3vw;

  .user-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .user-avatar {
      width: 4vw;
      height: 4vw;
      overflow: hidden;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .user-name {
      font-size: 0.8vw;
      font-weight: bold;
      margin: 0.8vh 0;
      span:nth-child(1) {
        margin-right: 0.5vw;
      }
      span > img {
        width: 0.8vw;
        height: 0.8vw;
        cursor: pointer;
      }
    }
    .user-id {
      font-size: 0.8vw;
    }
  }

  .user-info {
    border: 1px solid #f3deb9;
    border-radius: 10px;
    width: 95%;
    margin: 1vh;
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3deb9;
      padding: 1vh 1vw;

      .item-info {
        font-size: 0.9vw;

        .info-title {
          color: #5a3819;
          margin-bottom: 1vh;
        }

        .item-data {
          color: #646464;
        }
      }
      .change-btn {
        border: 1px solid #5a3819;
        padding: 0.3vh 0.7vw;
        border-radius: 3px;
        cursor: pointer;
        user-select: none;
        font-size: 0.8vw;
      }
      .change-btn:active {
        background: #5a3819;
        color: #fff;
        padding: 0.3vh 0.7vw;
        border-radius: 3px;
        cursor: pointer;
        user-select: none;
      }
    }
    .info-item:last-child {
      // display: flex;
      border-bottom: none;
    }
  }
}
.login-footer {
  flex: 1;
  padding: 2vh 3vw;
  border-top: 4px solid #b08e4b;
}

#mainlogo1 img {
  width: 10.5vw;
}
.btm-text {
  color: #f3deb9;
  font-size: 1.45vw;
  margin-left: 15px;
}

.header-bottom {
  display: flex;
}

#subLogo img {
  width: 6vw;
}

.foot-body {
  display: flex;
  align-items: center;
}
.foot-web {
  font-size: 0.8vw;
  color: #5a3819;
  margin: 0 5px;
}
.foot-link {
  font-size: 0.7vw;
  color: #b08e4b;
}

.log-out {
  width: 100%;
  display: flex;
  justify-content: center;
  button {
    margin: 20px 0;
    width: 10vw;
    height: 3.2vh;
    background: linear-gradient(to bottom, #f3deb9, #b08e4b);
    border: 1px solid #5a3819;
    color: #f3deb9;
    font-size: 0.9vw;
    border-radius: 3px;
    cursor: pointer;
  }

  button:active {
    background: #5a3819;
    cursor: pointer;
  }
}
</style>